<script setup>
import { ref, onMounted } from 'vue'
import { getGoodsApi, deleteGoodsApi } from '@/api/goods'
import { useRouter } from 'vue-router'
import { useGoodsStore } from '@/stores/counter'; 

const goodsStore = useGoodsStore()
const {getGoods} =useGoodsStore()


const router = useRouter()

const goods = ref([])

// const getGoods = async () => {
//   goods.value = await getGoodsApi()
// }

const handleUpdata = (id) => {
  console.log(id)
  router.push(`/edit/${id}`)
}

const handleDelete = async (id) => {
  await deleteGoodsApi(id)
  getGoods()
}
onMounted (()=>{
  getGoods()
}
)


</script>

<template>
  <table>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>操作</th>
    </tr>
   <!--  <tr v-for="good in goods" :key="good.id">
      <td>{{ good.id }}</td>
      <td>{{ good.name }}</td>
      <td>{{ good.price }}</td>
      <td>
        <button @click="handleUpdata(good.id)">修改</button> 
        <button @click="handleDelete(good.id)">删除</button>
      </td>
    </tr> -->
    <tr v-for="good in goodsStore.goods" :key="good.id">
      <td>{{ good.id }}</td>
      <td>{{ good.name }}</td>
      <td>{{ good.price }}</td>
      <td>
        <button @click="handleUpdata(good.id)">修改</button> 
        &nbsp;<button @click="handleDelete(good.id)">删除</button>
      </td>
    </tr>
  </table>
</template>

<style scoped>
table {
  width:500px;
  border-collapse: collapse;
  border: 1px solid #743434;
}
th, td {
  border: 1px solid #743434;
  padding: 5px;

}
</style>
